<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 最顶部的新增试题按钮 -->
      <el-row class="cardHeader">
        <span style="font-size:12px;color:pink">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" icon="el-icon-edit" class="newQuestion" size="small">新增试题</el-button>
      </el-row>
      <!-- /最顶部的新增试题按钮 -->

      <!-- 头部搜索题目区域 -->
      <questionSearch :subjectsList="subjectsList" @searchBtn="searchBtnFn"></questionSearch>
      <!-- /头部搜索题目区域 -->

      <!-- 消息提示条 -->
      <el-alert
        :title="`数据一共${questionNum}条`"
        type="info"
        show-icon
        :closable="false"
        class="infoMessage"
      ></el-alert>
      <!-- /消息提示条 -->

      <!-- 所有基础题目的列表 -->
      <questionTable
        :questionList="questionList"
        :pages="pages"
        @preview="clickFn"
        @delete="deleteFn"
        @CurrentChange="CurrentChangeFn"
        @sizeChange="sizeChangeFn"
        @joinClick="joinClickFn"
      ></questionTable>
      <!-- /所有基础题目的列表 -->
    </el-card>

    <!-- 弹出层组件 -->
    <questionsPreview
      v-if="dialogTableVisible"
      :dialogTableVisible="dialogTableVisible"
      :questionData="questionData"
      @closeBtn="dialogTableVisible = false"
    ></questionsPreview>
    <!-- 弹出层组件 -->
  </div>
</template>

<script>
import questionsPreview from '@/module-hmmm/components/questions-preview.vue'
import questionSearch from '@/module-hmmm/components/questionSearch.vue'
import questionTable from '@/module-hmmm/components/questionTable.vue'

// import { detail as detailTags } from '@/api/hmmm/tags' //获取学科详情的接口
import { detail as detailDirectorys } from '@/api/hmmm/directorys' // 获取目录详情的接口
import { list, detail, remove, choice, choiceAdd } from '@/api/hmmm/questions' // 获得题目列表和题目详情的接口
import { simple } from '@/api/hmmm/subjects' // 获取简单学科列表

import dayjs from 'dayjs'

export default {
  name: 'questionsPage',

  components: {
    questionsPreview,
    questionSearch,
    questionTable
  },

  data () {
    return {
      dialogTableVisible: false, // 用于控制弹出层组件的开关
      questionData: null, // 用于显示某个具体数据
      questionList: [], // 用于储存所有题目的列表
      questionNum: 0,
      questionListTrue: [],
      PageNum: 1, // 当前的页码值
      pages: 1, // 总共用有的页面
      pagesSize: 5, // 当前每页有多少条数据
      subjectsList: [] // 所有学科列表
    }
  },

  async created () {
    // 调用获得基础题国库列表
    this.getBasisQuestion(this.PageNum, this.pagesSize)

    this.getSubjectsList()

    const { data } = await choice()
    console.log(data)
  },

  methods: {
    // 调用学科列表的数据
    async getSubjectsList () {
      const { data } = await simple()
      this.subjectsList = data
      console.log(data)
    },

    // 点击某个题目进入详情页
    async clickFn (i, val) {
      const data = await detail({ id: val.id })
      this.questionData = data.data
      this.questionData.subject = this.questionListTrue[i].subject
      console.log(this.questionData)
      this.dialogTableVisible = !this.dialogTableVisible
    },


    joinClickFn (val) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info '
      }).then(async () => {

        try {
          //调用接口 并且重新渲染页面
          await choiceAdd({
            id: val.id,
            choiceState: 1
          })
          this.getBasisQuestion()

          this.$message({
            type: 'success',
            message: '加入精选成功!'
          });
        } catch (err) {
          this.$message({
            type: 'info',
            message: '加入精选失败,请稍后再试'
          });
        }
      });

    },
    // 点击删除按钮
    deleteFn (val) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调用删除数据接口
        try {
          await remove({ id: val.id })
          this.questionList = []
          this.getBasisQuestion()
        } catch (err) {
          console.log('失败了')
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 删除成功后，重新获取一下数据并渲染页面
      })
    },

    // 获得基础题库列表
    async getBasisQuestion (PageNum, pagesSize, dataVal) {
      this.questionList = []
      const { data } = await list({
        page: PageNum,
        pagesize: pagesSize,
        ...dataVal
      })
      // console.log(data)

      this.questionListTrue = data.items

      // let subject = null
      let subjectDirectorys = null
      let questionType = null
      let question = null
      let initTime = null
      let difficulty = null

      this.questionNum = data.counts
      this.pages = data.pages

      data.items.forEach(async (item, i) => {
        // 通过ID获得学科的详细名字
        // subject = await detailTags({ id: item.subjectID })

        // 通过ID获得目录的详细名字
        subjectDirectorys = await detailDirectorys({ id: item.catalogID })

        // 这里通过编号确定题目的题型
        if (item.questionType == 2) {
          questionType = '多选题'
        } else if (item.questionType == 1) {
          questionType = '单选题'
        } else {
          questionType = '解答题'
        }

        // 这里解决题干上有P标签的问题
        question = this.initP(item.question)

        // 这里解决录入时间的问题
        initTime = dayjs(item.addDate).format('YYYY-MM-DD HH:mm:ss')
        // 这里区分题目的难度
        if (item.difficulty === 3) {
          difficulty = '困难'
        } else if (item.difficulty === '2') {
          difficulty = '一般'
        } else if (item.difficulty === '1') {
          difficulty = '简单'
        }

        // 将格式化好的数据添加进数组
        this.questionList.unshift({
          number: item.number,
          subject: item.subject,
          catalogID: subjectDirectorys.data.directoryName,
          questionType: questionType,
          question: question,
          addDate: initTime,
          difficulty: difficulty,
          creator: item.creator,
          operation: item.operation,
          id: item.id
        })
      })
      // console.log(this.questionList);
    },

    // 点击切换页码
    CurrentChangeFn (val) {
      // 更新页码
      this.PageNum = val
      // 利用最新的页码获取最新的数据
      try {
        this.getBasisQuestion(this.PageNum, this.pagesSize)
      } catch (err) {
        console.log(err)
      }
    },

    // 点击修改每页展示数量时触发
    sizeChangeFn (num) {
      // 跟新每页的条数
      this.pagesSize = num
      // 利用最新的获取最新的数据
      try {
        this.getBasisQuestion(this.PageNum, this.pagesSize)
      } catch (err) {
        console.log(err)
      }
    },

    searchBtnFn (data) {
      this.PageNum = 1
      // console.log(data);
      this.getBasisQuestion(this.PageNum, this.pagesSize, data)
    },

    initP (val) {
      return val.replace(/<[^>]+>/g, '')
    }

  }

}
</script>

<style scoped >
.infoMessage {
  margin-bottom: 15px;
}
.cardHeader {
  margin-bottom: 15px;
}
.box-card {
  overflow: hidden;
  margin: 10px auto;
  width: 99%;
}
.newQuestion {
  float: right;
  font-size: 12px;
}
</style>
